<template>
  <div class="out-item">
    <mt-layout-container
      background="white"
      style="
        margin-bottom: 16px !important;
        padding: 4px 16px 16px 16px !important;
      "
    >
      <mt-layout-container>
        <mt-layout-container-multiple
          style="
            height: 40px !important;
            border-color: #e5e9ea !important;
            border-bottom-style: solid !important;
            border-bottom-width: 1px !important;
          "
        >
          <mt-layout-container-multiple-item>
            <img
              src="@/assets/images/rl.png"
              style="
                height: 25px !important;
                text-align: left !important;
                float: left !important;
                margin-top: 8px !important;
              "
            />
          </mt-layout-container-multiple-item>
          <mt-layout-container-multiple-item>
            <mt-text
              type="default"
              size="16px"
              style="
                margin-left: 8px;
                text-align: left !important;
                line-height: 40px !important;
                float: left !important;
                font-size: 16px !important;
                color: #555555 !important;
                margin-left: 8px !important;
              "
              >{{ item.outDate }}</mt-text
            >
          </mt-layout-container-multiple-item>
        </mt-layout-container-multiple>
        <!-- 预计外出时间 -->
        <mt-layout-container-multiple style="margin-top: 10px">
          <mt-layout-container-multiple-item>
            <img
              src="@/assets/images/time.png"
              style="
                width: 16px;
                margin-top: 2px;
                float: left;
                text-align: left;
                margin-right: 5px;
              "
            />
          </mt-layout-container-multiple-item>
          <mt-layout-container-multiple-item>
            <mt-text
              style="
                font-size: 14px !important;
                color: #999999 !important;
                line-height: 20px !important;
                width: 100px !important;
                text-align: left !important;
                float: left !important;
                flex: 0 0 70px !important;
              "
              >预计外出时间：</mt-text
            >
          </mt-layout-container-multiple-item>

          <mt-layout-container-multiple-item>
            <mt-text
              style="
                text-align: left !important;
                float: left !important;
                color: #555555 !important;
                font-size: 14px !important;
                line-height: 20px !important;
              "
              >{{ item.outTime }}</mt-text
            >
          </mt-layout-container-multiple-item>
        </mt-layout-container-multiple>
        <!-- 预计返回时间 -->
        <mt-layout-container-multiple style="margin-top: 10px">
          <mt-layout-container-multiple-item>
            <img
              src="@/assets/images/time.png"
              style="
                width: 16px;
                height: 16px;
                margin-top: 2px;
                float: left;
                text-align: left;
                margin-right: 5px;
              "
            />
          </mt-layout-container-multiple-item>
          <mt-layout-container-multiple-item>
            <mt-text
              style="
                font-size: 14px !important;
                color: #999999 !important;
                line-height: 20px !important;
                width: 100px !important;
                text-align: left !important;
                float: left !important;
                flex: 0 0 70px !important;
              "
              >预计返回时间：</mt-text
            >
          </mt-layout-container-multiple-item>

          <mt-layout-container-multiple-item>
            <mt-text
              style="
                text-align: left !important;
                float: left !important;
                color: #555555 !important;
                font-size: 14px !important;
                line-height: 20px !important;
              "
              >{{ item.backTime }}</mt-text
            >
          </mt-layout-container-multiple-item>
        </mt-layout-container-multiple>
        <!-- 离校事由 -->
        <mt-layout-container-multiple
          style="margin-top: 10px; margin-bottom: 8px !important"
        >
          <mt-layout-container-multiple-item>
            <!-- <img
              src="@/assets/images/xinxi.png"
              style="
                width: 16px;
                height: 16px;
                margin-top: 2px;
                float: left;
                text-align: left;
                margin-right: 5px;
              "
            /> -->
            <span class="mint-icon" style="margin-right: 4px !important"
              ><i
                class="iconfont mint-icon-i icon-xinxi"
                style="color: rgb(146, 150, 156)"
              ></i
            ></span>
          </mt-layout-container-multiple-item>
          <mt-layout-container-multiple-item>
            <mt-text
              style="
                -webkit-tap-highlight-color: transparent;
                font-family: PingFang SC, Microsoft YaHei;
                box-sizing: border-box;
                color: #92969c !important;
                font-size: 14px !important;
                position: relative;
                word-break: break-word;
                width: 75px !important;
                display: inline-block !important;
                flex: 0 0 75px !important;
              "
              >离校事由：</mt-text
            >
          </mt-layout-container-multiple-item>

          <mt-layout-container-multiple-item>
            <mt-text
              style="
                display: inline-block !important;
                font-size: 14px !important;
                color: #1e2329 !important;
              "
              >临时外出</mt-text
            >
          </mt-layout-container-multiple-item>
        </mt-layout-container-multiple>

        <!-- 目的地 -->
        <mt-layout-container-multiple style="margin-top: 10px">
          <mt-layout-container-multiple-item>
            <img
              src="@/assets/images/qz.png"
              style="
                width: 16px;
                height: 16px;
                margin-top: 2px;
                float: left;
                text-align: left;
                margin-right: 5px;
              "
            />
          </mt-layout-container-multiple-item>
          <mt-layout-container-multiple-item>
            <mt-text
              style="
                font-size: 14px !important;
                color: #999999 !important;
                line-height: 20px !important;
                width: 100px !important;
                text-align: left !important;
                float: left !important;
                flex: 0 0 70px !important;
              "
              >目的地：</mt-text
            >
          </mt-layout-container-multiple-item>

          <mt-layout-container-multiple-item>
            <mt-text
              style="
                text-align: left !important;
                float: left !important;
                color: #555555 !important;
                font-size: 14px !important;
                line-height: 20px !important;
              "
              >{{ item.destination }}</mt-text
            >
          </mt-layout-container-multiple-item>
        </mt-layout-container-multiple>
      </mt-layout-container>
      <mt-layout-container-multiple
        style="
          margin-top: 10px !important;
          margin-bottom: 0px !important;
          padding-left: 4px !important;
        "
      >
        <mt-layout-container-multiple-item>
          <mt-badge
            size="small"
            color="white"
            style="
              display: inline-block !important;
              background-color: #4fc033 !important;
              margin: 2px !important;
              width: 4px !important;
              height: 4px !important;
              padding: 0 !important;
            "
          ></mt-badge>
        </mt-layout-container-multiple-item>
        <mt-layout-container-multiple-item>
          <mt-text
            style="
              display: inline-block !important;
              color: #4fc033 !important;
              font-size: 16px !important;
            "
            >&nbsp;已通过</mt-text
          >
        </mt-layout-container-multiple-item>
      </mt-layout-container-multiple>
    </mt-layout-container>
  </div>
</template>

<script>
export default {
  name: "OutItem",
  props: ["item"],
  data() {
    return {};
  },
};
</script>
<style>
.mt-color-theme {
  color: #52c7ca !important;
}
.mt-color-grey-lv2 {
  color: #2f343b;
}
</style>
<style scoped src="../../public/style.css"></style>
<style scoped src="../../public/skin.css"></style>
